vue组件如何自己调用自己（组件递归）

您所在的位置：网站首页 › vue 自定义组件嵌套 › vue组件如何自己调用自己（组件递归）

vue组件如何自己调用自己（组件递归）

2024-07-11 09:24| 来源: 网络整理| 查看: 265

vue组件如何自己调用自己（组件递归）

在做侧边栏导航动态加载时，需要用到vue的组件递归，最开始打算直接写函数递归来解决问题，结果没什么卵用，越写越复杂。直接上代码

给组件name值

export default { name: "SideItem", }

直接在组件中调用即可

注意不要在组件内定义vue.components，否则会报错

示例：

父组件 ( 正常引入调用 )

import moduleSun from '@/views/moduleSun' export default { components: { moduleSun }, data() { return { chartData: [{ nameCN: '111', nameEN: 'en111', remarks: '我是111', children: [{ nameCN: '222', nameEN: 'en222', remarks: '我是222', children: [{ nameCN: '222-111', nameEN: 'en222-111', remarks: '我是222-111', }], }, { nameCN: '333', nameEN: 'en333', remarks: '我是333', }], }], } }, }

子组件 ( 组件中需定义name名称 )

{{chartData.nameCN}} {{chartData.nameEN}} {{chartData.remarks}} export default { name: 'moduleSun', props: { chartData: { type: Object, default: () => { return {} } }, }, } .chart-main { width: 100px; border: 1px solid #000; > div { margin-top: 5px; } }

【本文地址】

vue组件如何自己调用自己（组件递归）

vue组件如何自己调用自己（组件递归）

今日新闻

推荐新闻